<template>
  <div>
    <div class="party_box" id="party_box">
      <div class="img">
        <div class="layout">
          <p class="title">
            <span>标题</span>
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo menu_top_right"
              mode="horizontal"
              @select="partySelect"
            >
              <!-- 导航 -->
              <el-menu-item
                v-for="item in partylist"
                :key="item.dictValue"
                :index="item.inde"
                >{{ item.dictLabel }}
              </el-menu-item>
              <el-menu-item
                index="15"
                style="width: 50px !important; flex: none !important"
              >
                <span class="more"> </span>
              </el-menu-item>
            </el-menu>
          </p>
          <div v-if="reveal" class="lunbo_wrap">
            <div class="left" style="width: 500px">
              <div class="up" v-if="!lunnoShow">
                <div class="img">
                  <img
                    :src="listoneImg"
                    :alt="imgtitle"
                    :title="imgtitle"
                    @mouseenter="IMGmouseenter()"
                    @mouseleave="IMGmouseleave()"
                  />
                </div>
              </div>
            </div>
            <div class="right" id="partySelect">
              <div class="right_list">
                <ul class="lunbo_box" v-if="!lunnoShow">
                  <li
                    v-for="(item, index) in listtwos"
                    :key="item.id"
                    @mouseenter="LImouseenter(index)"
                    @mouseleave="LImouseleave(index)"
                  >
                    <router-link to="">
                      <em
                        :class="
                          index == 0
                            ? 'lunbo_box_em lunbo_on_em'
                            : 'lunbo_box_em'
                        "
                      ></em>
                      <span
                        :class="
                          index == 0
                            ? 'lunbo_box_span lunbo_on_span'
                            : 'lunbo_box_span'
                        "
                      >
                        {{ item.title }}就发给大家国际东方路
                      </span>
                    </router-link>
                  </li>
                  <router-link
                    :to="{
                      path: '/Operating/ids',
                      query: { index: lunboValue },
                    }"
                    class="item_more"
                  >
                    <i>>></i>
                  </router-link>
                </ul>
              </div>
            </div>
          </div>
          <!-- 党建状态为空 -->
          <!-- <div class="patykong lunbo_wrap" v-else> -->
          <!-- 空 -->
          <!-- <img src="~/assets/images/none.png" alt/> -->
          <!-- <p>{{ $t("title.kong", $store.state.locale) }}</p> -->
          <!-- </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arrlist: [
        {
          name: "欧洲",
        },
        {
          name: "亚洲",
        },
        {
          name: "中国",
        },
        {
          name: "美国",
        },
        {
          name: "欧洲1",
        },
        {
          name: "欧洲2",
        },
        {
          name: "欧洲3",
        },
      ],
      top: 0,
      // BASE_URL: process.env.BASE_URL,
      activeIndex: "1",
      num: 0,
      resultsList: {},
      swiperList: ["@/assets/images/China Gansu International"],
      noticeList: [],
      ColumnTypeList: [],
      time: null,
      queryParams: {
        pageNum: 1,
        pageSize: 18,
        typeId: undefined,
        language: undefined,
      },
      // 头条新闻
      topNews: [],
      // 新闻类型
      typelist: [],
      // 新闻列表
      newslist: [],
      newsli: [],
      // 党建列表
      partylist: [
        {
          createBy: "admin",
          createTime: "2021-10-08 11:34:37",
          dictCode: 33,
          dictLabel: "援外项目",
          dictSort: 1,
          dictType: "zh_operating_result_type",
          dictValue: "1",
          isDefault: "N",
          modifyBy: "admin",
          modifyTime: "2022-03-22 17:17:48",
          status: "0",
        },
        {
          createBy: "admin",
          createTime: "2021-10-11 14:30:38",
          dictCode: 39,
          dictLabel: "使馆项目",
          dictSort: 2,
          dictType: "zh_operating_result_type",
          dictValue: "2",
          isDefault: "N",
          modifyBy: "admin",
          modifyTime: "2022-03-22 17:18:02",
          status: "0",
        },
        {
          createBy: "admin",
          createTime: "2021-10-08 11:34:22",
          dictCode: 31,
          dictLabel: "非洲",
          dictSort: 3,
          dictType: "zh_operating_result_type",
          dictValue: "3",
          isDefault: "N",
          modifyBy: "admin",
          modifyTime: "2022-03-22 17:17:38",
          status: "0",
        },
        {
          createBy: "admin",
          createTime: "2021-10-08 11:34:29",
          dictCode: 32,
          dictLabel: "亚洲",
          dictSort: 4,
          dictType: "zh_operating_result_type",
          dictValue: "4",
          isDefault: "N",
          modifyBy: "admin",
          modifyTime: "2022-03-22 17:17:43",
          status: "0",
        },
        {
          createBy: "admin",
          createTime: "2021-10-11 14:30:16",
          dictCode: 37,
          dictLabel: "欧洲",
          dictSort: 5,
          dictType: "zh_operating_result_type",
          dictValue: "5",
          isDefault: "N",
          modifyBy: "admin",
          modifyTime: "2022-03-22 17:17:52",
          status: "0",
        },
        {
          createBy: "admin",
          createTime: "2021-10-11 14:30:31",
          dictCode: 38,
          dictLabel: "国内",
          dictSort: 6,
          dictType: "zh_operating_result_type",
          dictValue: "6",
          isDefault: "N",
          modifyBy: "admin",
          modifyTime: "2022-03-22 17:17:58",
          status: "0",
        },
      ],
      listed: [
    ],
      objOne: [
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/5710a62d-580a-4805-b584-95de18d55d3e.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/f111cf40-d94d-4e8a-b305-872da4e2156e.jpg",
          createTime: "2022-03-28 14:33:57",
          description: "",
          id: 841,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 1,
          title: "援多哥人民联盟之家项目",
          type: "1",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/63521d88-641c-40c0-840d-0b5b4679ec8a.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/b2407127-d4ca-4302-8a51-05f099f42d1c.jpg",
          createTime: "2022-03-28 14:37:55",
          description: "",
          id: 845,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 2,
          title: "援津巴布韦体育场",
          type: "1",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/d5ebe7ea-ee46-47d6-bc6f-d8e50ad472dc.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/ea7138d9-bcae-4baa-97f5-f3d4f549c0d6.jpg",
          createTime: "2022-03-28 14:38:16",
          description: "",
          id: 846,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 3,
          title: "援科特迪瓦国家剧场",
          type: "1",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/d7a3609a-963f-45b4-af4d-3963f90ba7eb.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/e4384d66-adb8-42c5-b38d-4f0cef158c2c.jpg",
          createTime: "2022-03-28 14:36:30",
          description: "",
          id: 842,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 3,
          title: "援建加纳职业技术学院",
          type: "1",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/1a12473c-2bf8-47cc-874f-0f4a618329f1.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/58e3cfb9-00c0-40d0-91b4-ad6d1111dea9.jpg",
          createTime: "2022-03-28 14:36:51",
          description: "",
          id: 843,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 4,
          title: "援津巴布韦奇诺伊师范学院项目",
          type: "1",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/15f1c60a-83b9-4ba5-9776-46a9678b756e.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/ffa8f56b-6c47-4e6b-abaf-24240d02cd8b.jpg",
          createTime: "2022-03-28 14:40:20",
          description: "",
          id: 850,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 5,
          title: "援塞拉利昂国家体育场大修项目",
          type: "1",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/95df568d-3d4e-4670-860b-0372593669d2.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/a7bb7379-96c9-4ece-935f-6e91ef3fe16f.jpg",
          createTime: "2022-03-28 14:37:20",
          description: "",
          id: 844,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 5,
          title: "援津巴布韦奇诺伊医院项目",
          type: "1",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/407d60ac-e384-40c4-aed0-84b20c110ce2.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/7320ce60-9920-4e3e-8931-6f18d4071ca4.jpg",
          createTime: "2022-03-28 14:38:43",
          description: "",
          id: 847,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 8,
          title: "援科特迪瓦加尼瓦医院项目",
          type: "1",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/3de0425e-7c8e-4fe4-af36-b830b8502f20.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/1270bc1b-cf76-4d66-b29a-33c27144f36c.jpg",
          createTime: "2022-03-28 14:39:01",
          description: "",
          id: 848,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 9,
          title: "援科特迪瓦露天剧场",
          type: "1",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/bc3ade37-174d-47cb-a3b2-3a9e6ccf9355.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/7758a5ca-7af3-4803-96b5-9da68804209d.jpg",
          createTime: "2022-03-28 14:39:24",
          description: "",
          id: 849,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 10,
          title: "援纳米比亚4所学校项目",
          type: "1",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/67e4df0c-366d-443e-a9e1-3032580238a1.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/1e570a3e-f64e-49ee-82cd-71ad1fea851b.jpg",
          createTime: "2022-03-28 14:33:35",
          description: "",
          id: 840,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 100,
          title: "援多哥阿尼耶糖厂",
          type: "1",
        },
      ],
      listone: {},
      listoneImg: "",
      imgtitle: "",
      listtwo: {},
      listtwos: [],
      frist: {},
      imglist: {},
      // 显示空状态
      reveal: true,
      newsid: 0,
      queryParamstwo: {
        pageNum: 1,
        type: 1,
        pageSize: 60,
      },
      newsactive: "1",
      tim: null,
      imlit: [],
      // 中甘和我
      firm: [],
      queryParamsad: {
        pageNum: 1,
        pageSize: 6,
        typeId: 34,
        language: undefined,
      },
      firmfirst: {},
      timr: null,
      imlits: [],
      timeOut: null,
      rout: 0,
      frist: 0,
      isshow: true,
      newstime: null,
      partytime0: null,
      partytime1: null,
      partytime2: null,
      party: null,
      first: [],
      second: [],
      thirdly: [],
      fourthly: [],
      fifth: [],
      sixth: [],
      newsone: [],
      newstwo: [],
      newsthree: [],
      newsfive: [],
      lunnoShow: true,
      domSpan: undefined,
      domEm: undefined,
      lunboIndex: 0,
      lunboValue: null,
      setint: false,
      obj: [
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/f4023bdb-8e38-4e78-bab2-e0c89223bb96.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/f55df29f-9215-4aee-a01e-f89591d2e1c4.jpg",
          createTime: "2022-03-28 14:11:47",
          description: "",
          id: 826,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 1,
          title: "中国驻埃塞俄比亚大使馆",
          type: "2",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/ce02ce9e-bec5-4894-b16d-1360b4a57d23.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/b9d50242-720c-4c26-84e3-43234758648f.jpg",
          createTime: "2022-03-28 14:12:10",
          description: "",
          id: 827,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 2,
          title: "中国驻博茨瓦纳大使馆",
          type: "2",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/4e68259e-b5fc-4930-84d2-28109a292079.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/57fc5c01-9952-43be-b83e-cbcae920a01a.jpg",
          createTime: "2022-03-28 14:12:30",
          description: "",
          id: 828,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 3,
          title: "中国驻布隆迪大使馆",
          type: "2",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/f4b69ccb-6600-4d01-ab1e-1d6fc514662c.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/09b40b5f-9ea4-4bd3-9833-a2f93302b438.jpg",
          createTime: "2022-03-28 14:12:49",
          description: "",
          id: 829,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 4,
          title: "中国驻加纳大使馆",
          type: "2",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/68ae5d17-ddaf-43e8-acc6-3888ac6b8bec.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/5e46b0af-e4af-44e0-9b16-112325c4c8c6.jpg",
          createTime: "2022-03-28 14:13:09",
          description: "",
          id: 830,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 5,
          title: "中国驻津巴布韦大使馆庭院",
          type: "2",
        },
        {
          content:
            '<p data-we-empty-p="" style="text-align:center;"><img src="http://121.37.197.243:8030/adminApi/image/2022328/9739479d-8fc4-476b-bac0-0a0146b99c6b.jpg" style="max-width:100%;" contenteditable="false"/></p>',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/5c3b3065-87b1-495c-ad13-e338814ac636.jpg",
          createTime: "2022-03-28 14:13:31",
          description: "",
          id: 831,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 6,
          title: "中国驻印度大使馆",
          type: "2",
        },
      ],
    };
  },
  created() {
    // console.log(this.types[1].children,'this.types[1].children[3].id');
    // this.queryParams.typeId = this.types[1].children[3].id;
    // console.log(this.types, "类目");
    this.patyList();
  },
  mounted() {
    window.addEventListener("load", function () {
      // console.log(window.innerWidth);
      window.addEventListener("resize", function () {
        // console.log(window.innerWidth);
        this.innerWidth = window.innerWidth;
      });
    });
    // 思路：如果页面是不可见的，那么我们就会清除定时器，如果页面是可见的，那么我们就重新开启定时器。
    // 所以我们需要用document.onvisibilitychange进行监听，然后用document.visibilityState或者是document.hidden进行判断。
    // console.log(  document.onvisibilitychange,'document商铺也')
    this.$nextTick(() => {
      document.onvisibilitychange = () => {
        this.setint = document.hidden;
        // console.log(this.setint,'this.setint')
        // console.log("hidden首页" + ":" + document.hidden);
        // console.log("visibilityState首页" + ":" + document.visibilityState);
        if (document.visibilityState == "visible" || !document.hidden) {
          this.partySelect(this.lunboValue);
        } else {
          clearInterval(this.partytime2);
          clearInterval(this.partytime1);
          this.partytime1 = null;
          this.partytime2 = null;
        }
      };
    });
  },
  updated() {
    // this.lang = this.$store.state.locales.locale;
  },

  watch: {
    rout: function (newvalue, oldvalue) {
      if (this.$refs.ztop.style) {
        if (newvalue == 1) {
          this.$refs.ztop.style.marginTop = 0;
          this.tim = setInterval(() => {
            this.newli();
          }, 5000);
        } else {
          clearInterval(this.tim);
          this.tim = null;
          clearInterval(this.timr);
          this.timr = null;
        }
      }
    },
  },

  // 方法
  methods: {
    patyList() {
      this.activeIndex = "0";
      this.partylist.map((item, index) => {
        item.inde = String(index);
      });
      this.partySelect(0);
    },
    lunbo(length, index, value) {
      this.lunnoShow = false;
      // console.log(length, "调用了");
      // console.log(index, "进来以后的index");
      // console.log(this.domSpan, "   this.domSpan ");
      if (this.domSpan && value != 1) {
        this.$nextTick(() => {
          this.partytime1 = setInterval(() => {
            // console.log(index, "index11111111");
            if (index < length) {
              for (let i = 0; i < length; i++) {
                this.domSpan[i].className = "lunbo_box_span";
                this.domEm[i].className = "lunbo_box_em";
              }
              this.domSpan[index].className = "lunbo_on_span";
              this.domEm[index].className = "lunbo_on_em";
              this.listoneImg = this.listtwos[index].coverImg;
              this.imgtitle = this.listtwos[index].title;
              this.lunboIndex = index;
              index = index + 1;
            } else {
              index = 0;
            }
          }, 1500);
        });
      } else {
        this.$nextTick(() => {
          this.domSpan = document.querySelectorAll(".lunbo_box_span");
          this.domEm = document.querySelectorAll(".lunbo_box_em");
          this.partytime2 = setInterval(() => {
            // console.log(index, "index222222222222");
            if (index < length) {
              for (let i = 0; i < length; i++) {
                this.domSpan[i].className = "lunbo_box_span";
                this.domEm[i].className = "lunbo_box_em";
              }
              this.domSpan[index].className = "lunbo_on_span";
              this.domEm[index].className = "lunbo_on_em";
              this.listoneImg = this.listtwos[index].coverImg;
              this.imgtitle = this.listtwos[index].title;
              this.lunboIndex = index;
              index = index + 1;
            } else {
              index = 0;
            }
          }, 1500);
        });
      }
    },
    // 党建 ==>> 导航条
    partySelect(value) {
      this.lunboValue = value;
      console.log(this.lunboValue, "this.lunboValue");

      this.partylist.forEach((item) => {
        console.log(item.inde, "inde");
        if (value == item.inde) {
          this.queryParamstwo.type = item.dictValue;
          //   resultsList(this.queryParamstwo).then((ok) => {
          // 列表
          // this.listed = ok.data.data;
          //
          if (value == 0) {
            this.listed = this.objOne
            this.first = this.listed.slice(0, 10);
          } else if (value == 1) {
            // 这里因为是死数据，所以分开判断赋值，项目中只需要重新请求接口赋值
         
            this.listed = this.obj;
            this.first = this.listed.slice(0, 10);
          } else {
            clearInterval(this.party);
            this.party = null;
          }
          // console.log(ok, "ok");

          // console.log(this.listed, " this.listed");
          // 第一条数据
          this.listone = this.listed[0];
          if (!this.listone) {
            this.reveal = false;
          } else {
            this.reveal = true;
          }
          //左边的数据
          // this.listtwo = this.listed.slice(1, 8);
          // 右边的数据
          // this.listtwos = this.listed.slice(8, 19);
          this.listtwos = this.listed.slice(0, 10);

          clearInterval(this.partytime2);
          clearInterval(this.partytime1);
          this.lunnoShow = true;
          this.lunboIndex = 0;
          this.partytime0 = setTimeout(() => {
            this.lunbo(this.listtwos.length, 0, 1);
          }, 500);
          if (this.listtwos.length) {
            this.listoneImg = this.listtwos[0].coverImg;
            this.imgtitle = this.listtwos[0].title;
          }
          //   });
        }
      });
    },

    LImouseenter(index) {
      this.lunboIndex = index;
      clearInterval(this.partytime2);
      clearInterval(this.partytime1);
      this.$nextTick(() => {
        for (let i = 0; i < this.listtwos.length; i++) {
          this.domSpan[i].className = "lunbo_box_span";
          this.domEm[i].className = "lunbo_box_em";
        }
        this.domSpan[index].className = "lunbo_on_span";
        this.domEm[index].className = "lunbo_on_em";
        this.listoneImg = this.listtwos[index].coverImg;
        this.imgtitle = this.listtwos[index].title;
      });
    },
    LImouseleave(index) {
      this.lunboIndex = index;
      this.lunbo(this.listtwos.length, index);
    },
    IMGmouseenter() {
      console.log(this.lunboIndex, "lunboIndex");
      this.LImouseenter(this.lunboIndex);
    },
    IMGmouseleave() {
      this.LImouseleave(this.lunboIndex);
    },
  },
  beforeDestroy() {
    clearInterval(this.newstime);
    this.newstime = null;
    clearInterval(this.partytime);
    this.partytime = null;
    clearInterval(this.party);
    this.party = null;
    clearInterval(this.time);
    this.time = null;
    clearInterval(this.tim);
    this.tim = null;
    clearInterval(this.timr);
    this.timr = null;

    clearInterval(this.partytime2);
    clearInterval(this.partytime1);
    clearInterval(this.partytime0);
    this.partytime1 = null;
    this.partytime2 = null;
    this.partytime0 = null;
  },
  // 过滤器
  filters: {
    // 处理时间
    date: function (val) {
      if (!val) {
        return "";
      }
      return val.substring(0, 10);
    },
  },
};
</script>

<style scoped>
.lunbo_box_span {
  color: #222 !important;
  font-weight: 400 !important;
}

.lunbo_box_em {
  background-color: #bbbbbb !important;
}

.lunbo_span {
  color: #222 !important;
  font-weight: 400 !important;
}

.lunbo_em {
  background-color: #bbbbbb !important;
}

.lunbo_on_span {
  color: #0162b3 !important;
  font-weight: 600 !important;
}

.lunbo_on_em {
  background-color: #0162b3 !important;
}

.lunbo_wrap {
  /* height: 300px; */
  display: flex;
}

.img img {
  display: inline-block;
  width: 500px;
  height: 350px;
  margin: 10px 20px;
}
.party_box .left .up {
  height: 380px;
  width: 550px;
  display: inline-block;
}
#partySelect {
  display: inline-block;
  width: 300px;
  box-sizing: border-box;
  margin-left: 30px;
}
.left {
  display: inline-block;
}

#partySelect >>> .el-menu {
  background-color: #f5f5f8;
  border-bottom: 1px solid #dddddd !important;
  display: flex;
}

#partySelect >>> .el-menu--horizontal > .el-menu-item.is-active {
  color: #fff;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  background-color: #0162b3;
  border-bottom: none;
  padding: 0 2px;
  box-sizing: border-box;
  margin-left: 2px;
}

#partySelect >>> .el-menu--horizontal > .el-menu-item {
  flex: 1;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #0162b3;
  line-height: 30px;
  /* border-bottom: 1px solid #dddddd !important; */
  /*max-width: 100px;*/
  padding: 0px;
  width: 100%;
}

#partySelect >>> .el-menu.el-menu--horizontal {
  width: 100%;
  height: 30px;
}

/* #partySelect >>> .el-menu--horizontal > .el-menu-item:hover {
  color: #fff;
  background-color: #0162b3;
} */
#partySelect >>> .el-menu--horizontal > .el-menu-item .more {
  color: #0162b3;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  background-color: transparent;
  padding: 0;
  width: 50px !important;
  /*flex: none !important;*/
}

#partySelect .right_list ul li {
  display: flex;
  font-size: 16px;
  font-family: Microsoft YaHei;
}
#partySelect .right_list ul li span {
  /* ⽂本不折⾏ */
  white-space: nowrap;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 溢出显⽰3个⼩圆点 */
  text-overflow: ellipsis;
  width: 250px;
  display: inline-block;
  line-height: 32px;
}
.party_box .right_list li em {
  float: left;
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #bbbbbb;
  position: relative;
  transform: translateY(-50%);
  margin-right: 15px;
  top: 50%;
}
.title {
  line-height: 50px;
  font-family: Lantinghei SC;
  border-bottom: 1px solid #ddd;
  color: #0162b3;
  font-size: 20px;
  margin-bottom: 10px;
}
.menu_top_right {
  border-bottom: 1px solid #e6e6e6;
  width: 75%;
  text-align: center;
  float: right;
  display: flex;
  justify-content: right;
  height: 50px;
}
.el-menu--horizontal > .el-menu-item {
  height: 50px;
}
</style>